
var    repeat = document.getElementById('repeatRadio'),
	repeatx = document.getElementById('repeatXRadio'),
	repeaty = document.getElementById('repeatYRadio'),
	norepeat = document.getElementById('norepeatRadio'),
	image = new Image();
	
	var canvas = document.getElementById('jk');

	var context;
	if (canvas.getContext('2d')) {
		context = canvas.getContext('2d');
	} else return;


function fillCanvasWithPattern(patternString) {
    var pattern = context.createPattern(image, patternString);
	context.clearRect(0,0,canvas.width, canvas.height);		
	context.fillStyle = pattern;
	context.fillRect(0, 0, canvas.width, canvas.height);
	context.fill();
}

repeat.onclick = function(e) {
	fillCanvasWithPattern('repeat');
}

repeatx.onclick = function(e) {
	fillCanvasWithPattern('repeat-x');
}

repeaty.onclick = function(e) {
	fillCanvasWithPattern('repeat-y');
}

norepeat.onclick = function(e) {
	fillCanvasWithPattern('no-repeat');
}

image.src = "/static/images/favicon.png";
image.onload = function(e) {
	fillCanvasWithPattern('repeat');
}